<template>
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card>
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="房间号" prop="roomInfo">
              <!-- <el-select v-model="form.roomInfo" placeholder="请选择" multiple collapse-tags @change="selectChange">
                <el-option  :value="form.roomInfo" style="height: auto">
                  <el-tree :data="selectOption"   ref="tree" highlight-current :props="defaultProps"></el-tree>
              </el-option>
            </el-select> -->
              <el-cascader :options="selectOption" v-model="form.roomInfo" :show-all-levels="false"></el-cascader>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :lg="8" :md="12" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="queryMap">查询
            </el-button>
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
            <el-button type='success' size='mini' icon='el-icon-refresh' @click="statusChange2">刷新</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- <el-button size="mini" @click="statusChange2">刷新</el-button> -->
    <el-card style="margin-top:10px;height:1300px;overflow:scroll;">
      <label for="form" class="asideText">职场统计</label>
      <el-form :model="workPlaceStatistics" ref="workPlaceStatistics" size="mini" label-position="left"
        label-width="130px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="签入座位数:" prop="login">
              <span class="itemText">{{workPlaceStatistics.login}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签出座位数:" prop="logout">
              <span class="itemText">{{workPlaceStatistics.logout}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="divLine"></div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="小休座位数:" prop="breaktype">
              <span class="itemText">{{workPlaceStatistics.breaktype}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="就绪座位数:" prop="ready">
              <span class="itemText">{{workPlaceStatistics.ready}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="振铃座位数:" prop="ringing">
              <span class="itemText">{{workPlaceStatistics.ringing}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="示忙座位数:" prop="notready">
              <span class="itemText">{{workPlaceStatistics.notready}}</span>
            </el-form-item>
          </el-col>
          <!-- </el-row>
        <el-row :gutter="20"> -->
          <el-col :span="8">
            <el-form-item label="话后小结座位数:" prop="aftercallwork">
              <span class="itemText">{{workPlaceStatistics.aftercallwork}}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="挂断座位数:" prop="release">
              <span class="itemText">{{workPlaceStatistics.release}}</span>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="通话中座位数:" prop="established">
              <span class="itemText">{{workPlaceStatistics.established}}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="已匹配座位数:" prop="matched">
              <span class="itemText">{{workPlaceStatistics.matched}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接听状态座位数:" prop="answer">
              <span class="itemText">{{workPlaceStatistics.answer}}</span>
            </el-form-item>
          </el-col> -->

          <el-col :span="8">
            <el-form-item label="其他:" prop="other">
              <span class="itemText">{{workPlaceStatistics.other}}</span>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <el-container>
        <el-header height="30px" class="physical_title"></el-header>
        <el-container>
          <el-aside class="physical_left" :width="mapWidth" :height="mapHeight">
            <el-col>
              <div>
                <canvas id="canvas" :width="mapWidth" :height="mapHeight" style="border:1px solid black"></canvas>
              </div>
            </el-col>
            <el-col></el-col>
            <el-col>
              <el-row style="border:0px solid black;margin-top:10px;">

                <el-col :span="14">
                  <el-table :data="tableData" ref="table" border max-height="300"
                    :header-cell-style="{width:'20px',color:'#409EFF'}">
                    <el-table-column type="index" width="40"></el-table-column>
                    <el-table-column prop="WARNINFO" :label="tableLabel"></el-table-column>
                  </el-table>
                </el-col>
              </el-row>

            </el-col>
          </el-aside>
        </el-container>
      </el-container>
    </el-card>
    <keep-alive>
      <component :is="dialogList.seatIforDialog" :option="dialogOptions"></component>
    </keep-alive>
  </div>
</template>
<script>
  import toolBox from "@/common/utils/toolBox";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  // 点击方框 弹出的对话框
  import seatIforDialog from "./dialog/seatIforDialog";
  // 查询95个工位的所有状态
  import query from "@/message/siteManagement/workplacemonitoring/query";
  // YYGl通讯
  import requestYg from "@/common/utils/requestYg";
  // 查询单个工位状态
  import seatStatus from "@/message/siteManagement/workplacemonitoring/querySeatStatus";
  // fabric依赖
  import {
    fabric
  } from "fabric";
  // 本地储存所有状态资源
  // import { statusList } from "./dataInfo";
  import iconQuery from "@/message/siteManagement/iconManage/iconQuery";
  import queryRoomInfo from "@/message/siteManagement/workplacemonitoring/roomManage";
  import seatManage from "@/message/siteManagement/workplacemonitoring/seatManage";
  // import selectTree from "@/components/selectTree6/"


  export default {
    name: "",
    // components: {
    //   selectTree
    // },
    data() {
      return {
        selectOption: [],
        treeData: [],
        ROOMNAME: '',
        imgUrl: getGlobalParams.get('ImageDownloadAddress'),
        mapWidth: getGlobalParams.get("mapWidth"),
        mapHeight: getGlobalParams.get("mapHeight"),
        queryTime: getGlobalParams.get('agentQueryTime'),
        form: {
          roomInfo: ['1001', '0000000021']
        },
        stationList: [], // 房间的工位
        statusOptions: [], // 状态图标
        roomOption: [], //房间信息
        warningColor: '#E6A23C',
        logoutColor: '#EBEEF5',
        loginColor: '#67C23A',
        statusOptions: [],
        canvasObj: {},
        statusGroup: {},
        //  上页跳转传送的房间以及工位数据
        getRoomInfo: [],
        // 传值
        innitInfoData: {},
        AREANO: "1",
        backgroundURL: "",
        URL: "",
        timer: null,
        btnFlag: true,
        // 弹窗相关
        currentRow: [],
        loading: false, //loading遮罩
        isDisabledDel: false,
        dialogList: {
          //指定被渲染组件列表
          seatIforDialog
        },
        dialogOptions: {
          //新增
          isShow: false
        },
        dialogOptions: {
          isShow: false,
          currentRow: {}
        },
        //  职场统计
        workPlaceStatistics: {
          ready: null, //'就绪'
          ringing: null, //'振玲'
          notready: null, //示忙
          aftercallwork: null, //话后小结
          release: null, //'保持'
          established: null, //
          breaktype: null, //'小休'
          matched: null, //'内部通话'
          answer: null, //'呼出'
          login: null, //'呼入'
          logout: null, //'签出'
          other: null //其他
        },
        // 预警
        tableData: [],
        agentData: [], //坐席工位
        tableLabel: null
      };
    },
    computed: {},
    created: function () {},
    watch: {

    },
    mounted() {
      // this.canvasInit();
      this.queryRoom()
      // this.queryRoomSeat()
      // this.queryMap()
      // this.canvasInit()
      // this.getParams();
      // this.queryModel()
    },

    methods: {
      queryMap() {
        let imageNo = ''
        this.roomOption.forEach(item => {
          if (item.ROOMNO == this.form.roomInfo[1]) {
            imageNo = item.IMAGENO
          }
        })
        this.queryModel(imageNo)
        this.queryRoomSeat()
        // this.canvasInit()
      },
      getRoom(data) {
        this.roomInfo = data.ROOMNO
        this.ROOMNAME = data.ROOMNAME
      },
      changeRoom(data) {},
      // 当前房间的工位状态，
      async queryRoomSeat() {
        let resBody = new seatManage();
        resBody.data.ROOMNO = this.form.roomInfo[1]
        resBody.data.OPERFLAG = 'S'
        resBody.data.CURRPAGE = 1
        resBody.data.PAGEROWNUM = 200;
        resBody.data.PAGEFLAG = 4;
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.stationList = response.RSP_BODY.struct
          this.canvasInit()
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      //查询房间
      async queryRoom() {
        let resBody = new queryRoomInfo();
        resBody.data.OPERFLAG = 'S' //操作标志
        resBody.data.pageflag = 4; //分页标识(1-最后一页,2-上一页,3-下一页,4-当前页)
        resBody.data.pagerownum = 100; //表格每页的条数
        resBody.data.currpage = 1; //当前页
        // console.log("房间信息查询query的resBody.data",resBody.data);
        requestYg(resBody)
          .then(response => {
            // console.log("房间信息查询的response，", response);
            // ? response.RSP_BODY.TOTALROWNUM
            // : 0;
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.roomOption = response.RSP_BODY.struct || [];
              this.queryMap()
              // 把源数据先变成目标数据的规则
              var oldDataRule = []
              this.roomOption.forEach(el => {
                var oldObj = {
                  value: el.CENTERNO,
                  label: el.CENTERNAME,
                  children: []
                }
                var childObj = {
                  value: el.ROOMNO,
                  label: el.ROOMNAME
                }
                oldObj.children.push(childObj)
                oldDataRule.push(oldObj)
              })
              /**
               * 先去重，后合并
               * 1、源数据去重
               * 2、把去重后的数据和源数据中相同name的数据合并citys
               */
              var newData = []
              var newObj = {}
              oldDataRule.forEach((el, i) => {
                if (!newObj[el.value]) {
                  newData.push(el);
                  newObj[el.value] = true;
                } else {
                  newData.forEach(el => {
                    if (el.value === oldDataRule[i].value) {
                      el.children = el.children.concat(oldDataRule[i].children);
                      // el.citys = [...el.citys, ...oldDataRule[i].citys]; // es6语法
                    }
                  })
                }
              })
              this.selectOption = newData
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },

      // fn2() {
      //   this.tableData = [];
      // },
      // selectMap(data) {
      //   let imageNo = ''
      //   if (this.treeData.length == 0) {
      //     this.treeData = data[0];
      //   }

      //   console.log(data);
      //   console.log(this.treeData);
      //   this.treeData.forEach(item => {
      //     if (item.ROOMNO == data[1] || item.ROOMNO == this.roomInfo) {
      //       imageNo = item.IMAGENO
      //     }
      //   })
      //   console.log(imageNo)
      //   this.queryModel(imageNo)
      //   this.queryRoomSeat()
      //   // this.canvasInit()
      // },

      // 重置查询条件
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      // 状态图标查询
      async queryModel(imageNo) {
        let resBody = new iconQuery();
        resBody.data.IMAGENO = imageNo;
        resBody.data.PAGEFLAG = 4;
        resBody.data.PAGEROWNUM = 100;
        resBody.data.CURRPAGE = 1;
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.statusOptions = response.RSP_BODY.struct[0].IMAGEINFO || []
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },
      // 接受上一页 table传参，后初始化canvas;
      getParams() {
        // console.log("this.$route.params,", this.$route.params);
        this.getRoomInfo = this.$route.params;
        if (this.getParams) {
          this.canvasInit();
        }
      },
      // 过滤匹配当前状态码对应的本地状态资源；
      getImageInfo(seat) {
        var imageInfos = this.statusOptions.filter(ele => {
          return ele.TYPE === seat.STATUS;
        });
        return imageInfos[0];
      },

      // 实时请求后台数据，刷新当前页面所有坐席的状态(初始化页面的所有坐席状态必须返回)
      statusChange2() {
        let textColor = 'black'
        let self = this;
        let resBody = new query();
        // console.log("this.AREANO,",this.AREANO);
        resBody.data.ROOMNO = this.form.roomInfo[1]
        resBody.data.MEDIATYPE = 'video'

        var resTimebefore = new Date().getTime();

        requestYg(resBody)
          .then(response => {
            var resTimeafter = new Date().getTime();
            // console.log("后端返回的结果response,", response,"反映的时刻,",resTimeafter,);

            // console.log(
            //   "发送开始-反映的时间-间隔，",
            //   resTimeafter - resTimebefore
            // );

            if (response.SYS_HEAD.ReturnCode === "000000") {
              // 处理地图数据response.RSP_BODY.struct || {}
              this.agentData = response.RSP_BODY.struct || []
              var resultData = response.RSP_BODY.struct || {};
              console.log("struct：", resultData);
              var count = 0;
              resultData.forEach((seat, index) => {
                // console.log("resultData,",seat,index);
                var imageInfo = self.getImageInfo(seat);
                // console.log( "statusGroup",self.statusGroup);
                // console.log("imageInfo,", imageInfo);

                self.statusGroup.forEachObject((seatGroup, index) => {
                  // console.log("seatGroup.SEATNO,",seatGroup.SEATNO,"seat.SEATNO,",seat.SEATNO,index);
                  if (seatGroup.SEATNO === seat.SEATNO) {
                    console.log(
                      "seatGroup.SEATNO,",
                      seatGroup.SEATNO,
                      "seat.SEATNO,",
                      seat.SEATNO,
                      "imageInfo,",
                      imageInfo
                    );

                    // 设置颜色:底部和边框
                    var fillColor = "";

                    if (seat.WARNFLAG === "2") {
                      textColor = 'white'
                      fillColor = this.warningColor;
                    } else if (imageInfo.TYPE === "logout" || imageInfo.TYPE === undefined) {
                      fillColor = this.logoutColor;
                    } else if (imageInfo.TYPE == 'breaktype') {
                      fillColor = '#acc'
                    } else {
                      fillColor = this.loginColor;
                    }
                    seatGroup.item(0).set({
                      fill: fillColor
                    });
                    //工号
                    var old_text = seatGroup.item(1).text;
                    var new_text =
                      imageInfo.TYPE === "login" ? seat.SEATNO : seat.AGENTID;

                    if (old_text === new_text && index === 1) {
                      new_text += " ";
                    }
                    seatGroup.item(1).set({
                      text: new_text,
                      fill: "white"
                    });
                    var textNo =
                      imageInfo.STATUS === "login" ? seat.SEATNO : seat.AGENTID;
                    //登录者姓名
                    seatGroup.item(2).set({
                      text: imageInfo.TYPE === "login" ?
                        imageInfo.statusName : seat.AGENTNAME,
                      fill: textColor
                    });

                    var textName =
                      imageInfo.TYPE === "login" ?
                      imageInfo.statusName :
                      seat.AGENTNAME;
                    textColor = 'black'
                    // 更换状态图
                    seatGroup.item(3).setSrc(this.imgUrl + imageInfo.URL, result => {
                      //  result.scale(0.6);
                      // console.log(
                      //   "seat.SEATNO,",
                      //   seat.SEATNO,
                      //   ",URL,",
                      //   this.imgUrl+imageInfo.URL,
                      //   ",textNo,",
                      //   textNo,
                      //   ",textName,",
                      //   textName
                      // );
                      // console.log(
                      //   "seat.STATUS,",
                      //   seat.STATUS,
                      //   ",本地的imageInfo.STATUS,",
                      //   imageInfo.TYPE
                      // );
                      count++;

                      if (count === self.statusGroup.size() - 1) {
                        // console.log("进入了rander,count=", count);

                        self.canvasObj.renderAll();
                        self.btnFlag = true;

                        var renderTimeafter = new Date().getTime();
                        // console.log("渲染结束时刻，", renderTimeafter);
                        // console.log(
                        //   "反映-渲染结束的时间间隔，",
                        //   renderTimeafter - resTimeafter
                        // );
                      }
                    });
                  }
                });
              });
              //  处理预警信息
              this.tableData = response.RSP_BODY.struct1 || [];
              var struct1InfoNum = response.RSP_BODY.struct1.length ?
                response.RSP_BODY.struct1.length :
                0;

              this.tableLabel = "坐席预警信息：" + struct1InfoNum + "条";
              // console.log(this.tableData);
              // 处理职场统计
              this.workPlaceStatistics.ready =
                response.RSP_BODY.ready;
              this.workPlaceStatistics.ringing =
                response.RSP_BODY.ringing;
              this.workPlaceStatistics.notready =
                response.RSP_BODY.notready;
              this.workPlaceStatistics.aftercallwork =
                response.RSP_BODY.aftercallwork;
              this.workPlaceStatistics.release = response.RSP_BODY.release;
              this.workPlaceStatistics.established =
                response.RSP_BODY.established;
              this.workPlaceStatistics.breaktype =
                response.RSP_BODY.breaktype;
              this.workPlaceStatistics.matched =
                response.RSP_BODY.matched;
              this.workPlaceStatistics.answer =
                response.RSP_BODY.answer;
              this.workPlaceStatistics.login =
                response.RSP_BODY.login;
              this.workPlaceStatistics.logout = response.RSP_BODY.logout;
              this.workPlaceStatistics.other = response.RSP_BODY.other;

            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              // this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },


      // 获取上页数据后，初始化操作：底图上创建所有工位
      canvasInit(num) {
        //初始化操作
        let _this = this;
        this.btnFlag = false;
        this.roomOption.forEach(item => {
          if (item.ROOMNO == this.form.roomInfo[1]) {
            this.getRoomInfo = item
          }
        })
        this.getRoomInfo.bkImageUrl = getGlobalParams.get("ImageDownloadAddress") + this.getRoomInfo.URL
        // console.log("canvas初始化操作:canvasInit");
        // console.log("this.getRoomInfo,", this.getRoomInfo);
        this.backgroundURL = this.getRoomInfo.bkImageUrl;
        this.innitInfoData = this.stationList;
        this.URL = this.getRoomInfo.bkImageUrl;
        // console.log(
        //   "this.backgroundURL,",
        //   this.backgroundURL,
        //   typeof this.backgroundURL
        // );
        // console.log("this.innitInfoData,", this.innitInfoData);
        var canvas = null;
        if (this.canvasObj.clear) {
          canvas = this.canvasObj;
          canvas.clear();
        } else {
          canvas = this.canvasObj = new fabric.Canvas("canvas");
        }
        canvas.interactive = false;

        fabric.Image.fromURL(this.backgroundURL, function (oImg) {
          canvas.setBackgroundImage(oImg, null, {
            scaleX: canvas.width / oImg._element.width,
            scaleY: canvas.height / oImg._element.height
          });
          var group = new fabric.Group([oImg], {
            lockScalingX: true,
            lockScalingY: true
          });
          _this.createSeat(group);
        });
      },

      // 创建工位
      createSeat(group) {
        // 初始化工位数据
        var seatWidth = 56;
        var seatHeight = 56;
        var fontSize = 8;
        var _this = this;
        // console.log("this.innitInfoData,", this.innitInfoData);
        this.innitInfoData.forEach(function (seat, index) {
          // console.log("seat,",seat,index);
          // seat.initIconUrl:从后台取；statusList[0].manUrl：从本地拿；未登录状态图；
          // console.log("stationSeat,", seat, index);
          var seatTop = parseInt(seat.TOP);
          var seatLeft = parseInt(seat.LEFT);
          // console.log(seatLeft,typeof seatLeft,seatTop,typeof seatTop);
          seat.initIconUrl = 'static/images/icons/icon/logout.png'
          fabric.Image.fromURL(seat.initIconUrl, function (statusImg) {
            // console.log("initIconUrl,", seat.initIconUrl);
            statusImg = statusImg.scale(1).set({
              left: seatLeft + 20,
              top: seatTop + 8
            });

            //绘制矩形
            var body = new fabric.Rect({
              width: seatWidth,
              height: seatHeight,
              left: seatLeft,
              top: seatTop,
              fill: "gray",
              rx: 10,
              ry: 10
            });

            // 工号seat.SEATNO
            var SEATNO = new fabric.Text(seat.SEATNO, {
              fontSize: 0,
              fill: "white",
              originX: "center",
              originY: "center",
              top: seatTop + 41,
              left: seatLeft + 28
            });
            // 状态名称
            // initStatusName：后台获取；statusList[0].statusName：本地拿；
            // var statusName = new fabric.Text(seat.initStatusName, {
            //   fontSize: fontSize,
            //   fill: "white",
            //   originX: "center",
            //   originY: "center",
            //   top: seatTop + 43,
            //   left: seatLeft + 20
            // });
            // 工位名称
            var SEATNAME = new fabric.Text(seat.SEATNAME, {
              fontSize: 11,
              fill: "black",
              originX: "center",
              originY: "center",
              top: seatTop + 41,
              left: seatLeft + 28
            });

            // 组合图片，
            var seatGroup = new fabric.Group(
              // [body, statusImg],
              // [body, SEATNO, statusName, statusImg],
              [body, SEATNO, SEATNAME, statusImg], {
                // 给每个seatGroup对应唯一的SEATNO 存位置信息;
                SEATNO: seat.SEATNO,
                // 锁住X,Y方向，不可缩放
                lockScalingX: true,
                lockScalingY: true
              }
            );
            group.addWithUpdate(seatGroup);
            if (index === _this.innitInfoData.length - 1) {
              _this.canvasObj.add(group);
              group.on("mouseup", _this.mouseScaledEventHandler);
              _this.statusGroup = group;
              //  有异步，必须在次此处加载，_this.statusGroup.forEachObject 存在时；
              _this.statusChange2();

              //  在次数开启定时任务，创建前先清除定时器，

              clearInterval(_this.timer);
              _this.timer = setInterval(() => {
                _this.statusChange2();
              }, _this.queryTime);

              // 路由跳转时，结束定时任务；
              _this.$once('hook:beforeDestroy', () => {
                // console.log("hook,", _this.timer);
                clearInterval(_this.timer);
              });
            }
          });
        });
      },
      // 点击工位方块的鼠标点击事件
      mouseScaledEventHandler(options) {
        // console.log(
        //   "group在canvas的当前位置- options.target.left和top：" +
        //     options.target.left +
        //     ", " +
        //     options.target.top
        // );
        // console.log(
        //   "鼠标点击在canvas的位置：" +
        //     options.absolutePointer.x +
        //     ", " +
        //     options.absolutePointer.y
        // );
        var cleft = parseInt(options.target.left);
        var ctop = parseInt(options.target.top);
        var mouseArray = this.innitInfoData.filter(function (ele, index, self) {
          // console.log(ele,"ele.left:",parseInt(ele.left),"ele.top:",parseInt(ele.top),index);
          return (
            parseInt(ele.LEFT) <= parseInt(options.absolutePointer.x) - cleft &&
            parseInt(options.absolutePointer.x) - cleft <=
            parseInt(ele.LEFT) + 56 &&
            parseInt(ele.TOP) <= parseInt(options.absolutePointer.y) - ctop &&
            parseInt(options.absolutePointer.y) - ctop <= parseInt(ele.TOP) + 56
          );
        });
        if (mouseArray.length) {
          var seatNo = mouseArray[0].SEATNO;
          if (seatNo) {
            this.queryOneSeat(seatNo);
          }
        }
      },

      // 查询单个工位信息；
      queryOneSeat(seatNo) {
        let self = this;
        let agentId = ''
        this.agentData.forEach(item => {
          if (item.SEATNO == seatNo) {
            agentId = item.AGENTID
          }
        })
        if (agentId == '' || agentId == undefined) {
          this.$message.error('当前坐席未登录')
          return
        }
        let resBody = new seatStatus();
        resBody.data.AGENTID = agentId;
        resBody.data.MULMEDIATYPE = 'all';
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              var resultData = response.RSP_BODY

              // 打开弹窗
              self.dialogOptions.currentRow = resultData;
              self.dialogOptions.title = "员工信息";
              self.dialogOptions.isShow = true;
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage + "。坐席工号：" + seatNo
              });
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },

      // 返回上一页
      prev() {
        console.log("返回上一页");
        this.$router.go(-1);
      }
    }
  };

</script>


<style lang="scss" scoped>
  .divLine {
    width: 100%;
    text-align: center;
    border-top: 1px solid #acc;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  // * {
  //   list-style-type: none;
  // }

  // li {
  //   font-size: 1px;
  //   color: #f5f5f5;
  // }

  .monitor {
    width: 100%;
    height: 35px;
    line-height: 33px;
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    color: #208cf0;
    padding: 0px 35px;
    text-align: center;
  }

  .physical_title {
    color: #208cf0;
    padding: 0;
    margin: 0;
    // border-bottom: 1px solid #e5e5e5;
    line-height: 30px;
    margin-bottom: 5px;
  }

  .backBeforepage {
    display: inline-block;
    left: 10px;
    position: absolute;
  }

  .search_right {
    margin-left: 5px;
  }

  .physical_left {
    position: relative;
    //  border:1px solid green;
    height: 100%;
    width: 1095px;
  }

  .selectTree {
    min-width: 150px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-card {
    width: 100%;
  }

  .el-form-item {
    margin-left: 30px;
  }

  .el-form-item1 {
    margin-left: 10px;
  }

  .box2-button {
    width: 80px;
  }

  .el-card {
    overflow: inherit;
  }

  .asideText {
    width: 100%;
    height: 35px;
    line-height: 33px;
    color: #409eff;
    text-align: center;
  }

</style>
